* {
  padding: 0;
  margin: 0;
}
html {
  overflow-y: scroll;
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;

} 
body {
  width: 100vw;
  min-height: 100vh;
  background-color: #17171D;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  box-sizing: border-box; 
  overflow-x: hidden;

}
.top {
  position: fixed;
  width: 100vw;
  top: 0;
  height: 200px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #17171D;
}
.basic {
  background-color: #393948;
  position: relative;
}
.basic,
.box {
  border-radius: 10px;
  width: 100px;
  height: 100px;
}
.box {
  background-color: #FC297F;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.basic .gitee{
  position: absolute;
  top:5%;
  right:-55%;
  display:flex;
  width:30px;
  height: 30px;
  background-image: url(../image/gitee-fill-round.png);
  background-repeat: no-repeat;
  background-size: cover;
  animation-name:gitee;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}
@keyframes gitee {
  0%{
    transform:rotate(20deg) 
  }
  50%{
    transform:rotate(-20deg) 
  }
  100%{
    transform:rotate(20deg) 
  }
}
.box .rocket {
  background-image: url(../image/rocket.png);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center center;
  width: 34px;
  height: 34px;
  transform: rotate(45deg);
}
.container {
  position: absolute;
  top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.magicbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 50px;
  max-width: 90vw;
}
.text {
  /* width: inherit; */
  font-size: 38px;
  max-width: 70vw;
  font-weight: 900;
  text-align: center;

  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* padding: 15px; */
}
.mbtn {
  transform-style: preserve-3d;
   perspective: 500px;
  width: inherit;
  display: flex;
  justify-content: space-evenly;
  align-content: space-between;
  font-weight: 600;
  flex-wrap: wrap;
}
.mbtn span {
  text-transform: uppercase;
  padding: 10px 15px;
  border: 1px solid #2F2F34;
  cursor: pointer;
  /* margin-left: 20px; */
  margin-top: 20px;
  outline: none;
  border-radius: 10px;
}
.magic {
  animation-name: magic;
  animation-duration: 2s;
}
@keyframes magic {
  0% {
    opacity: 1;
    transform-origin: 100% 200%;
    transform: scale(1, 1) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 500%;
    transform: scale(0, 0) rotate(270deg);
  }
}
.twisterindown {
  animation-name: twisterInDown;
  animation-duration: 0.6s;
  animation-timing-function: ease;
}
@keyframes twisterInDown {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: translate(-100%, 100%) scale(0, 0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: translate(0, 0) scale(1, 1) rotate(-360deg);
  }
}
.twisterinup {
  animation-name: twisterInUp;
  animation-duration: 0.6s;
  animation-timing-function: ease;
}
@keyframes twisterInUp {
  0% {
    opacity: 0.5;
    transform-origin: 100% 0%;
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
.swapleft {
  animation-name: swapleft;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes swapleft {
  0% {
    transform: scale(0, 0) translateX(-700px);
  }
  100% {
    transform: scale(1, 1) translateX(0);
  }
}
.swapright {
  animation-name: swapright;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes swapright {
  0% {
    transform: scale(0, 0) translateX(700px);
  }
  100% {
    transform: scale(1, 1) translateX(0);
  }
}
.swapboth {
  animation-name: swapboth;
  animation-duration: 1.5s;
  animation-timing-function: ease;
}
@keyframes swapboth {
  0% {
    opacity: 1;
    transform: scale(1, 1) translateX(0px);
  }
  25% {
    opacity: 1;
    transform: scale(0.5, 0.5) translateX(-500px);
  }
  40% {
    opacity: 0;
    transform: scale(0, 0) translateX(-700px);
  }
  50% {
    transform: scale(0, 0) translateX(700px);
  }
  75% {
    transform: scale(0.5, 0.5) translateX(550px);
  }
  100% {
    transform: scale(1, 1) translateX(0, 0);
  }
}
.puffin {
  animation-name: puffIn;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes puffIn {
  0% {
    opacity: 0;
    transform: scale(2, 2);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
    filter: blur(2px);
  }
}
.puffout {
  animation-name: puffOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes puffOut {
  0% {
    opacity: 1;
    transform: scale(1, 1);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(2, 2);
    filter: blur(3px);
  }
}
.vanishin {
  animation-name: vanishIn;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}
@keyframes vanishIn {
  0% {
    opacity: 0;
    transform: scale(2, 2);
    filter: blur(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
    filter: blur(30px);
  }
}
.vanishout {
  animation-name: vanishOut;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes vanishOut {
  0% {
    opacity: 1;
    transform: scale(1, 1);
    filter: blur(20px);
  }
  100% {
    opacity: 0;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}
.opendownleft {
  animation-name: openDownLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openDownLeft {
  0% {
    transform-origin: 0 100%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 0 100%;
    transform: rotate(-135deg);
  }
}
.opendownright {
  animation-name: openDownRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openDownRight {
  0% {
    transform-origin: 100% 100%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotate(135deg);
  }
}
.openupleft {
  animation-name: openUpLeft;
  animation-duration: 1s;
}
@keyframes openUpLeft {
  0% {
    transform-origin: 0% 0%;
    animation-timing-function: ease-out;
    transform: rotate(0deg);
  }
  70% {
    transform-origin: 0% 0%;
    animation-timing-function: ease-in-out;
    transform: rotate(110deg);
  }
  100% {
    transform-origin: 0% 0%;
    animation-timing-function: ease-in-out;
    transform: rotate(110deg);
  }
}
.openupright {
  animation-name: openUpRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openUpRight {
  0% {
    transform-origin: 100% 0%;
    transform: rotate(0deg);
  }
  70% {
    transform-origin: 100% 0%;
    transform: rotate(-110deg);
  }
  100% {
    transform-origin: 100% 0%;
    transform: rotate(-110deg);
  }
}
.opendownleftreturn {
  animation-name: openDownLeftReturn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
@keyframes openDownLeftReturn {
  0% {
    transform-origin: 0% 100%;
    transform: rotate(-110deg);
  }
  100% {
    transform-origin: 0% 100%;
    transform: rotate(0deg);
  }
}
.opendownrightreturn {
  animation-name: openDownRightReturn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
@keyframes openDownRightReturn {
  0% {
    transform-origin: 100% 100%;
    transform: rotate(110deg);
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotate(0deg);
  }
}
.openupleftreturn {
  animation-name: openUpLeftReturn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
@keyframes openUpLeftReturn {
  0% {
    transform-origin: 0% 0%;
    transform: rotate(110deg);
  }
  100% {
    transform-origin: 0% 0%;
    transform: rotate(0deg);
  }
}
.openuprightreturn {
  animation-name: openUpRightReturn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
@keyframes openUpRightReturn {
  0% {
    transform-origin: 100% 0%;
    transform: rotate(-110deg);
  }
  100% {
    transform-origin: 100% 0%;
    transform: rotate(0deg);
  }
}
.opendownleftout {
  animation-name: openDownLeftOut;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openDownLeftOut {
  0% {
    opacity: 1;
    transform-origin: left bottom;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: left bottom;
    transform: rotate(-110deg);
  }
}
.opendownrightout {
  animation-name: openDownRightOut;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openDownRightOut {
  0% {
    opacity: 1;
    transform-origin: right bottom;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: right bottom;
    transform: rotate(110deg);
  }
}
.openupleftout {
  animation-name: openUpLeftOut;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openUpLeftOut {
  0% {
    opacity: 1;
    transform-origin: left top;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: left top;
    transform: rotate(110deg);
  }
}
.openuprightout {
  animation-name: openUpRightOut;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes openUpRightOut {
  0% {
    opacity: 1;
    transform-origin: right top;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: right top;
    transform: rotate(-110deg);
  }
}
.perspectivedown {
  animation-name: perspectiveDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveDown {
  0% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(0deg);
  }
  100% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-180deg);
  }
}
.perspectiveup {
  animation-name: perspectiveUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveUp {
  0% {
    transform-origin: right top;
    transform: perspective(800px) rotateX(0deg);
  }
  100% {
    transform-origin: right top;
    transform: perspective(800px) rotateX(180deg);
  }
}
.perspectiveleft {
  animation-name: perspectiveLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveLeft {
  0% {
    transform-origin: left top;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    transform-origin: left top;
    transform: perspective(800px) rotateY(-180deg);
  }
}
.perspectiveright {
  animation-name: perspectiveRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveRight {
  0% {
    transform-origin: right top;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    transform-origin: right top;
    transform: perspective(800px) rotateY(180deg);
  }
}
.perspectivedownreturn {
  animation-name: perspectiveDownReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveDownReturn {
  0% {
    transform-origin: left bottom;
    transform: perspective(800px) rotateX(-180deg);
  }
  100% {
    transform-origin: left bottom;
    transform: perspective(800px) rotateX(0deg);
  }
}
.perspectiveupreturn {
  animation-name: perspectiveUpReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveUpReturn {
  0% {
    transform-origin: right top;
    transform: perspective(800px) rotateX(180deg);
  }
  100% {
    transform-origin: right top;
    transform: perspective(800px) rotateX(0deg);
  }
}
.perspectiveleftreturn {
  animation-name: perspectiveLeftReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveLeftReturn {
  0% {
    transform-origin: left top;
    transform: perspective(800px) rotateY(-180deg);
  }
  100% {
    transform-origin: left top;
    transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiverightreturn {
  animation-name: perspectiveRightReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes perspectiveRightReturn {
  0% {
    transform-origin: right top;
    transform: perspective(800px) rotateY(180deg);
  }
  100% {
    transform-origin: right top;
    transform: perspective(800px) rotateY(0deg);
  }
}
.rotatedown {
  animation-name: rotateDown;
  animation-duration: 1.5s;
  animation-timing-function: ease;
}
@keyframes rotateDown {
  0% {
    opacity: 1;
    transform-origin: 0 200%;
    transform: perspective(800px) rotateX(0deg);
  }
  70% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-300deg);
  }
  100% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-360deg);
  }
}
.rotateup {
  animation-name: rotateUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes rotateUp {
  0% {
    opacity: 1;
    transform-origin: 0% -50%;
    transform: perspective(800px) rotateX(0deg);
  }
  70% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: perspective(800px) rotateX(300deg);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: perspective(800px) rotateX(360deg);
  }
}
.rotateleft {
  animation-name: rotateLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes rotateLeft {
  0% {
    opacity: 1;
    transform-origin: -50% 0%;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: -50% 0%;
    transform: perspective(800px) rotateY(-360deg);
  }
}
.rotateright {
  animation-name: rotateRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes rotateRight {
  0% {
    opacity: 1;
    transform-origin: 120% top;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 120% top;
    transform: perspective(800px) rotateY(360deg);
  }
}
.slidedown {
  animation-name: slideDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
.slideup {
  animation-name: slideUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
.slideleft {
  animation-name: slideLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.slideright {
  animation-name: slideRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.slidedownreturn {
  animation-name: slideDownReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideDownReturn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.slideupreturn {
  animation-name: slideUpReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideUpReturn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.slideleftreturn {
  animation-name: slideLeftReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideLeftReturn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.sliderightreturn {
  animation-name: slideRightReturn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes slideRightReturn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
.spaceoutup {
  animation-name: spaceOutUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceOutUp {
  0% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0) translateY(-500px);
  }
}
.spaceoutright {
  animation-name: spaceOutRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0) translateX(500px);
  }
}
.spaceoutdown {
  animation-name: spaceOutDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceOutDown {
  0% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0) translateY(500px);
  }
}
.spaceoutleft {
  animation-name: spaceOutLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceOutLeft {
  0% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0) translateX(-500px);
  }
}
.spaceinup {
  animation-name: spaceInUp;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}
@keyframes spaceInUp {
  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  0% {
    opacity: 0;
    transform: scale(0, 0) translateY(-500px);
  }
}
.spaceinright {
  animation-name: spaceInRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    transform: scale(0, 0) translateX(500px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
.spaceindown {
  animation-name: spaceInDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    transform: scale(0, 0) translateY(500px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
.spaceinleft {
  animation-name: spaceInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform: scale(0, 0) translateX(-500px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
.boinginup {
  animation-name: boingInUp;
  animation-duration: 0.6s;
  animation-timing-function: ease;
}
@keyframes boingInUp {
  0% {
    transform-origin: right top;
    transform: perspective(800px) rotateX(-45deg);
  }
  100% {
    transform-origin: right top;
    transform: perspective(800px) rotateX(45deg);
  }
}
.boingoutdown {
  animation-name: boingOutDown;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes boingOutDown {
  0% {
    opacity: 1;
    transform-origin: left bottom;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  10% {
    opacity: 1;
    transform-origin: right bottom;
    transform: perspective(800px) rotateX(0deg) rotateY(15deg);
  }
  20% {
    opacity: 1;
    transform-origin: left bottom;
    transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  30% {
    opacity: 1;
    transform-origin: left bottom;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: right bottom;
    transform: perspective(800px) rotateX(90deg);
  }
}
.bombrightout {
  animation-name: bombRightOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes bombRightOut {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: rotate(0deg);
    filter: blur(0px);
  }
  60% {
    opacity: 1;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(30px);
  }
}
.bombleftout {
  animation-name: bombLeftOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes bombLeftOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: rotate(0deg);
    filter: blur(0px);
  }
  60% {
    opacity: 1;
    transform-origin: -90% 60%;
    transform: rotate(-160deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: -90% 60%;
    transform: rotate(-160deg);
    filter: blur(30px);
  }
}
.tinrightout {
  animation-name: tinRightOut;
  animation-duration: 1.5s;
  animation-timing-function: ease;
}
@keyframes tinRightOut {
  0% {
    transform: scale(1.1, 1.1) translateX(0);
  }
  10% {
    transform: scale(1, 1) translateX(0);
  }
  20% {
    transform: scale(1.1, 1.1) translateX(0);
  }
  30% {
    transform: scale(1, 1) translateX(0);
  }
  100% {
    transform: scale(1, 1) translateX(100vw);
  }
}
.tinlout {
  animation-name: tinLeftOut;
  animation-duration: 1.5s;
  animation-timing-function: ease;
}
@keyframes tinLeftOut {
  0% {
    transform: scale(1.1, 1.1) translateX(0);
  }
  10% {
    transform: scale(1, 1) translateX(0);
  }
  20% {
    transform: scale(1.1, 1.1) translateX(0);
  }
  30% {
    transform: scale(1, 1) translateX(0);
  }
  100% {
    transform: scale(1, 1) translateX(-100vw);
  }
}
.tinupout {
  animation-name: tinUpOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes tinUpOut {
  0% {
    transform: scale(1.1, 1.1) translateY(0);
  }
  10% {
    transform: scale(1, 1) translateY(0);
  }
  20% {
    transform: scale(1.1, 1.1) translateY(0);
  }
  30% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(-100vh);
  }
}
.tindownout {
  animation-name: tinDownOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes tinDownOut {
  0% {
    transform: scale(1.1, 1.1) translateY(0);
  }
  10% {
    transform: scale(1, 1) translateY(0);
  }
  20% {
    transform: scale(1.1, 1.1) translateY(0);
  }
  30% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(100vh);
  }
}
.tinrightin {
  animation-name: tinRightIn;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes tinRightIn {
  0% {
    transform: scale(1, 1) translateX(100vw);
  }
  40%,
  60%,
  80%,
  100% {
    transform: scale(1.1, 1.1) translateX(0);
  }
  50%,
  70%,
  90% {
    transform: scale(1, 1) translateX(0);
  }
}
.tinleftin {
  animation-name: tinLeftIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
}
@keyframes tinLeftIn {
  0% {
    transform: scale(1, 1) translateX(-100vw);
  }
  40%,
  60%,
  80%,
  100% {
    transform: scale(1, 1) translateX(0);
  }
  50%,
  70%,
  90% {
    transform: scale(1.1, 1.1) translateX(0);
  }
}
.tinupin {
  animation-name: tinUpIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
}
@keyframes tinUpIn {
  0% {
    transform: scale(1, 1) translateY(-100vh);
  }
  50%,
  70%,
  90% {
    transform: scale(1.1, 1.1) translateY(0);
  }
  40%,
  60%,
  80% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
.tindownin {
  animation-name: tinDownIn;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes tinDownIn {
  0% {
    transform: scale(1, 1) translateY(100vh);
  }
  50%,
  70%,
  90% {
    transform: scale(1.1, 1.1) translateY(0);
  }
  40%,
  60%,
  80% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
.swashout {
  animation-name: swashOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes swashOut {
  70% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(0, 0);
  }
}
.swashin {
  animation-name: swashIn;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes swashIn {
  0% {
    transform: scale(0, 0);
  }
  70% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
.foolishin {
  animation-name: foolishIn;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes foolishIn {
  0% {
    transform: rotate(0deg) scale(0, 0) translateX(0) translateX(0);
  }
  10% {
    transform: rotate(-360deg) scale(0.5, 0.5) translateX(0%) translateY(50%);
  }
  20% {
    transform: rotate(-360deg) scale(0.5, 0.5) translateX(-50%) translateY(50%);
  }
  30% {
    transform: rotate(-360deg) scale(0.5, 0.5) translateX(50%) translateY(50%);
  }
  70% {
    transform: rotate(-360deg) scale(0.5, 0.5) translateX(-50%) translateY(-10%);
  }
  100% {
    transform: rotate(-360deg) scale(1, 1) translateX(0) translateX(0);
  }
}
.holeout {
  animation-name: holeOut;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes holeOut {
  0% {
    opacity: 1;
    transform: perspective(800px) scale(1, 1) rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform: perspective(800px) scale(0, 0) rotateY(360deg);
  }
}
.scale-in-center{
  animation:scale-in-center 1s ease;
}
@keyframes scale-in-center{
  0%{
    transform:scale(0,0)
  }
  100%{
    transform:scale(1,1)
  }
}
.scale-in-br{
  animation:scale-in-br 1s ease;
}
@keyframes scale-in-br{
  0%{
    transform-origin: bottom right;
    transform:scale(0,0)
  }
  100%{
    transform-origin: bottom right;
    transform:scale(1,1)
  }
}
.scale-in-top{
  animation:scale-in-top 0.5s ease;
}
@keyframes scale-in-top{
  0%{
    transform-origin:50% 0%;
    transform:scale(0,0)
  }
  100%{
    transform-origin:50% 0%;
    transform:scale(1,1)
  }
}
.scale-in-tr{
  animation:scale-in-tr 0.5s ease;
}
@keyframes scale-in-tr{
  0%{
    transform-origin:top right;
    transform:scale(0,0)
  }
  100%{
    transform-origin:top right;
    transform:scale(1,1)
  }
}
.scale-in-right{
  animation:scale-in-right 0.5s ease;
}
@keyframes scale-in-right{
  0%{
    transform-origin:100% 50%;
    transform:scale(0,0)
  }
  100%{
    transform-origin:100% 50%;
    transform:scale(1,1)
  }
}
.scale-in-bottom{
  animation:scale-in-bottom 0.5s ease;
}
@keyframes scale-in-bottom{
  0%{
    transform-origin:50% 100% ;
    transform:scale(0,0)
  }
  100%{
    transform-origin:50% 100% ;
    transform:scale(1,1)
  }
}

.scale-in-bl{
  animation:scale-in-bl 0.5s ease;
}
@keyframes scale-in-bl{
  0%{
    transform-origin:bottom left ;
    transform:scale(0,0)
  }
  100%{
    transform-origin:bottom left ;
    transform:scale(1,1)
  }
}
.scale-in-left{
  animation:scale-in-left 0.5s ease;
}
@keyframes scale-in-left{
  0%{
    transform-origin:0% 50% ;
    transform:scale(0,0)
  }
  100%{
    transform-origin:0% 50% ;
    transform:scale(1,1)
  }
}

.scale-in-tl{
  animation:scale-in-tl 0.5s ease;
}
@keyframes scale-in-tl{
  0%{
    transform-origin:top left ;
    transform:scale(0,0)
  }
  100%{
    transform-origin:top left ;
    transform:scale(1,1)
  }
}
.scale-in-hor-center{
  animation:scale-in-hor-center 0.5s ease;
}
@keyframes scale-in-hor-center{
  0%{
    transform-origin:center ;
    transform:scale(0,1)
  }
  100%{
    transform-origin:center ;
    transform:scale(1,1)
  }
}

.scale-in-hor-left{
  animation:scale-in-hor-left 0.5s ease-out;
}
@keyframes scale-in-hor-left{
  0%{
    transform-origin:0% 50% ;
    transform:scale(0.2,1)
  }
  60%{
    transform-origin:0% 50% ;
    transform:scale(0.7,1)
  }
  100%{
    transform-origin:0% 50% ;
    transform:scale(1,1)
  }
}
.scale-in-hor-right{
  animation:scale-in-hor-right 0.5s ease-out;
}
@keyframes scale-in-hor-right{
  0%{
    transform-origin:100% 50% ;
    transform:scale(0,1)
  }

  100%{
    transform-origin:100% 50% ;
    transform:scale(1,1)
  }
}
.scale-in-ver-center{
  animation:scale-in-ver-center 0.5s ease;
}
@keyframes scale-in-ver-center{
  0%{
    transform-origin:50% 50% ;
    transform:scale(1,0)
  }
  100%{
    transform-origin:50% 50% ;
    transform:scale(1,1)
  }
}
.scale-in-ver-top{
  animation:scale-in-ver-top 0.8s ease;
}
@keyframes scale-in-ver-top{
  0%{
    transform-origin:50% 0% ;
    transform:scale(1,0)
  }
  100%{
    transform-origin:50% 0% ;
    transform:scale(1,1)
  }
}
.scale-in-ver-bottom{
  animation:scale-in-ver-bottom 0.8s ease;
}
@keyframes scale-in-ver-bottom{
  0%{
    transform-origin:50% 100% ;
    transform:scale(1,0)
  }
  100%{
    transform-origin:50% 100% ;
    transform:scale(1,1)
  }
}
.rotate-in-center{
  animation:rotate-in-center 0.8s ease;
}
@keyframes rotate-in-center{
  0%{
    transform:rotate(0deg)
  }
  100%{
    transform:rotate(360deg)
  }
}
.rotate-in-br{
  animation:rotate-in-br 0.8s ease;
}
@keyframes rotate-in-br{
  0%{
  transform-origin:bottom right;
    transform:rotate(0deg)
  }
  100%{
  transform-origin:bottom right;
    transform:rotate(360deg)
  }
}
.rotate-in-tl{
  animation:rotate-in-tl 0.8s ease;
}
@keyframes rotate-in-tl{
  0%{
  transform-origin:top left;
    transform:rotate(0deg)
  }
  100%{
  transform-origin:top left;
    transform:rotate(360deg)
  }
}
.rotate-in-diag{
  animation:rotate-in-diag 0.8s ease;
}
@keyframes rotate-in-diag{
  0%{
    opacity: 0;
    -webkit-transform:rotate3d(-1,1,0,0deg);
    transform:rotate3d(-1,1,0,0deg);
    /* -webkit-transform:rotate3d(0,0,1,0deg); */
  }
  30%{
    opacity: 0.5;
    transform: rotate3d(-1,1,0,180deg);
    -webkit-transform: rotate3d(-1,1,0,180deg);
  }
  80%{
    opacity: 0.8;
    transform: rotate3d(-1,1,0,350deg);
    -webkit-transform: rotate3d(-1,1,0,350deg);
  }
  100%{
    opacity: 1;
    transform: rotate3d(-1,1,0,360deg);
    -webkit-transform: rotate3d(-1,1,0,360deg);
  }
}
.rotate-in-top{
  animation:rotate-in-top 0.8s ease;
}
@keyframes rotate-in-top{
  0%{
    transform-origin: 50% 0%;
    transform:rotate(0deg)
  }
  100%{
    transform-origin: 50% 0%;
    transform:rotate(360deg)
  }
}
.rotate-in-bottom{
  animation:rotate-in-bottom 0.8s ease;
}
@keyframes rotate-in-bottom{
  0%{
    transform-origin: 50% 100%;
    transform:rotate(0deg)
  }
  100%{
    transform-origin: 50% 100%;
    transform:rotate(360deg)
  }
}
.rotate-in-hor{
  animation:rotate-in-hor 0.8s ease;
}
@keyframes rotate-in-hor{
  0%{
    opacity: 0;
    transform-origin: 50% 50%;
    transform:rotateX(0deg)
  }
  100%{
    opacity: 1;
    transform-origin: 50% 50%;
    transform:rotateX(360deg)
  }
}
.rotate-in-tr{
  animation:rotate-in-tr 0.8s ease;
}
@keyframes rotate-in-tr{
  0%{
  transform-origin:top right;
    transform:rotate(0deg)
  }
  100%{
  transform-origin:top right;
    transform:rotate(360deg)
  }
}
.rotate-in-bl{
  animation:rotate-in-bl 0.8s ease;
}
@keyframes rotate-in-bl{
  0%{
  transform-origin:bottom left;
    transform:rotate(0deg)
  }
  100%{
  transform-origin:bottom left;
    transform:rotate(360deg)
  }
}
.rotate-in-ver{
  animation:rotate-in-ver 0.8s ease;
}
@keyframes rotate-in-ver{
  0%{
    opacity: 0;
    transform:rotateY(0deg)
  }
  100%{
    opacity: 1;
    transform:rotateY(360deg)
  }
}
.rotate-in-right{
  animation:rotate-in-right 0.8s ease;
}
@keyframes rotate-in-right{
  0%{
    opacity: 0;
    transform-origin: 100% 50%;
    transform:rotate(0deg)
  }
  100%{
    opacity: 1;
    transform-origin: 100% 50%;
    transform:rotate(360deg)
  }
}
.rotate-in-left{
  animation:rotate-in-left 0.8s ease;
}
@keyframes rotate-in-left{
  0%{
    opacity: 0;
    transform-origin: 
    0% 50%;
    transform:rotate(0deg)
  }
  100%{
    opacity: 1;
    transform-origin: 0% 50%;
    transform:rotate(360deg)
  }
}
.rotate-in-diag-1{
  -webkit-animation:rotate-in-diag-1 0.8s ease;

  animation:rotate-in-diag-1 0.8s ease;
}
@keyframes rotate-in-diag-1{
  0%{
    opacity: 0;
    -webkit-transform:rotate3d(1,0,0,0deg);
    transform:rotate3d(1,1,0,0deg);
    /* -webkit-transform:rotate3d(0,0,1,0deg); */
  }
  30%{
    opacity: 0.5;
    transform: rotate3d(1,1,0,180deg);
    -webkit-transform: rotate3d(1,1,0,180deg);
  }
  80%{
    opacity: 0.8;
    transform: rotate3d(1,1,0,350deg);
    -webkit-transform: rotate3d(1,1,0,350deg);
  }
  100%{
    opacity: 1;
    transform: rotate3d(1,1,0,360deg);
    -webkit-transform: rotate3d(1,1,0,360deg);
  }
}







/* 





*/
.rotate-in-2-cw{
  animation:rotate-in-2-cw 0.5s ease both;
}
@keyframes rotate-in-2-cw{
  0%{
    opacity: 0;
    transform:rotate(0deg)
  }
  100%{
    opacity: 1;
    transform:rotate(45deg)
  }
}


.rotate-in-2-bck-cw{
  animation:rotate-in-2-bck-cw 0.8s ease both;
}
@keyframes rotate-in-2-bck-cw{
  0%{
    opacity: 0;
    transform:scale(1.5,1.5) rotate(-45deg)
  }
  70%,100%{
    transform:scale(1,1) rotate(0deg)
  }
}

.rotate-in-2-br-cw{
  animation:rotate-in-2-br-cw 0.8s ease;
}
@keyframes rotate-in-2-br-cw{
  0%{
    opacity: 0;
    transform-origin: 100% 100%;
    transform:rotate(-45deg)
  }
  100%{
    opacity: 1;
    transform-origin: 100% 100%;
    transform:rotate(0deg)

  }
}

.rotate-in-2-tl-cw{
  animation:rotate-in-2-tl-cw 0.8s ease;
}
@keyframes rotate-in-2-tl-cw{
  0%{
    opacity: 0;
    transform-origin: top left;
    transform:rotate(-45deg)
  }
  100%{
    opacity: 1;
    transform-origin: top left;
    transform:rotate(0deg)

  }
}

.rotate-in-2-ccw{
  animation:rotate-in-2-ccw 0.8s ease;
}
@keyframes rotate-in-2-ccw{
  0%{
    transform:rotate(45deg)
  }
  100%{
    transform:rotate(0deg)
  }
}

.rotate-in-2-bck-ccw{
  animation:rotate-in-2-bck-ccw 1s ease;
}
@keyframes rotate-in-2-bck-ccw{
  0%{
    opacity: 0;
    transform:scale(1.5,1.5) rotate(45deg)
  }
  50%,100%{
    opacity: 1;
    transform:scale(1,1) rotate(0deg)
  }
}

.rotate-in-2-br-ccw{
  animation:rotate-in-2-br-ccw 0.8s ease;
}
@keyframes rotate-in-2-br-ccw{
  0%{
    opacity: 0;
    transform-origin: bottom right;
    transform:rotate(45deg)
  }
  100%{
    opacity: 1;
    transform-origin: bottom right;
    transform:rotate(0deg)
  }
}

.rotate-in-2-tl-ccw{
  animation:rotate-in-2-tl-ccw 0.8s ease;
}
@keyframes rotate-in-2-tl-ccw{
  0%{
    opacity: 0;
    transform-origin: top left;
    transform:rotate(45deg)
  }
  100%{
    opacity: 1;
    transform-origin: top left;
    transform:rotate(0deg)
  }
}
.rotate-in-2-fwd-cw{
  animation:rotate-in-2-fwd-cw 0.8s ease;
}
@keyframes rotate-in-2-fwd-cw{
  0%{
    opacity: 0;
    transform:scale(0.6,0.6) rotate(-45deg)
  }
  100%{
    opacity: 1;
    transform:scale(1,1) rotate(0deg)
  }
}

.rotate-in-2-tr-cw{
  animation:rotate-in-2-tr-cw 0.8s ease;
}
@keyframes rotate-in-2-tr-cw{
  0%{
    opacity: 0;
    transform-origin: top right;
    transform: rotate(-45deg)
  }
  100%{
    opacity: 1;
    transform-origin: top right;
    transform: rotate(0deg)
  }
}

.rotate-in-2-bl-cw{
  animation:rotate-in-2-bl-cw 0.8s ease;
}
@keyframes rotate-in-2-bl-cw{
  0%{
    opacity: 0;
    transform-origin: bottom left;
    transform: rotate(-45deg)
  }
  100%{
    opacity: 1;
    transform-origin: bottom left;
    transform: rotate(0deg)
  }
}

.rotate-in-2-fwd-ccw{
  animation:rotate-in-2-fwd-ccw 0.8s ease;
}
@keyframes rotate-in-2-fwd-ccw{
  0%{
    opacity: 0;
    transform:rotate(45deg)
  }
  100%{
    opacity: 1;
    transform:rotate(0deg)
  }
}


.rotate-in-2-tr-ccw{
  animation:rotate-in-2-tr-ccw 0.8s ease;
}
@keyframes rotate-in-2-tr-ccw{
  0%{
    transform-origin:top right; 
    transform:rotate(45deg)
  }
  100%{
    transform-origin:top right;
    transform:rotate(0deg)
  }
}

.rotate-in-2-bl-ccw{
  animation:rotate-in-2-bl-ccw 0.8s ease;
}
@keyframes rotate-in-2-bl-ccw{
  0%{
    transform-origin:bottom left;
    transform:rotate(45deg)
  }
  100%{
    transform-origin:bottom left;
    transform:rotate(0deg)
  }
}


